@extends('wap.layout.base')
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    title: '基本信息',
                    form: {
                        username: "{{ auth()->user()->username }}",
                        name: "{{ auth()->user()->name }}",
                        avatar: "{{ auth()->user()->avatar }}",
                        company: "{{ auth()->user()->company }}",
                        introduce: "{{ auth()->user()->introduce }}",
                        email: "{{ auth()->user()->email }}",
                        _token:"{{csrf_token()}}"
                    },
                }
            },
            methods: {
                onClickLeft() {
                    window.location.href = "{{ route('wap.user.index') }}";
                },
                update() {
                    let that = this;
                    if(!this.form.name){
                        this.$toast('请输入用户名');
                        return false;
                    }
                    if(!this.form.email){
                        this.$toast('请输入邮箱');
                        return false;
                    }
                    $.post("{{ route('wap.user.detail') }}",this.form,function(res){
                        if(res.code){
                            that.$toast(res.msg);
                        }else{
                            that.$toast.loading({
                                duration: 0,       // 持续展示 toast
                                forbidClick: true, // 禁用背景点击
                                loadingType: 'spinner',
                                message: '保存成功'
                            });
                            setTimeout(function(){
                                that.$toast.clear();
                                window.location.href = "{{ route('wap.user.index') }}";
                            }, 1000);
                        }
                    });
                },
                //上传封面
                uploadSuccess(file) {
                    let that = this;
                    const isLt2M = file.file.size / 1024 / 1024 < 2;
                    if (!isLt2M) {
                        this.$toast('图片大小不能超过 2M!');return false;
                    }
                    let params = new FormData(); //创建form对象
                    params.append('image', file.file); //通过append向form对象添加数据//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
                    $.ajax({
                        type: "POST",
                        url: "{{ route('api.upload.img') }}",
                        data: params,
                        cache: false,
                        contentType: false,
                        processData : false,
                        success: function (data) {
                            that.form.avatar = data.data.path;
                        }
                    });
                },
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main user-detail" id="app" v-cloak>
        <div class="row">
            <van-nav-bar
                    :title="title"
                    left-text=""
                    border
                    fixed="true"
                    left-arrow="false"
                    @click-left="onClickLeft">
                <van-icon name="arrow-left" slot="left"/>
            </van-nav-bar>
            <div class="col-xs-12">
                <van-cell-group style="padding: 1rem 0;text-align: right;font-size: 1.5rem;color: #323233;">
                    <span style="float: left;margin-top: 1.5rem;margin-left: 1.3rem">头像</span>
                    <van-uploader :after-read="uploadSuccess">
                        <img :src="form.avatar" style="width:5rem;height:5rem;border: 1px dashed #ccc;border-radius: 50%;"/>
                    </van-uploader>
                </van-cell-group>
                <van-cell-group>
                    <van-field input-align="right" v-model="form.name" label="用户名" placeholder="请输入用户名"/>
                </van-cell-group>
                <van-cell-group>
                    <van-field input-align="right" readonly v-model="form.username" label="手机号"/>
                </van-cell-group>
                <van-cell-group>
                    <van-field input-align="right" v-model="form.email" label="邮箱" placeholder="请输入邮箱"/>
                </van-cell-group>
                <van-cell-group>
                    <van-field input-align="right" v-model="form.company" label="公司" placeholder="请输入公司名称"/>
                </van-cell-group>
                <p style="padding-left: 1.2rem;margin-top: 1rem">个人简介</p>
                <van-cell-group>
                    <van-field type="textarea" autosize v-model="form.introduce" placeholder="请输入个人简介"/>
                </van-cell-group>
                <p class="form-submit" style="margin-top: 2rem">
                    <van-button type="default" @click="update()">保存提交</van-button>
                </p>
            </div>
        </div>
    </div>
@endsection

